import React, { useState } from "react";
import { Input, Card } from "antd";

const JobSearch = ({ onSearch, filters }) => {
  const [searchTerm, setSearchTerm] = useState("");

  const handleInputChange = (e) => {
    const value = e.target.value;
    setSearchTerm(value);
    onSearch(value.trim()); // 实时调用父组件的回调函数
  };

  return (
    <>
      {/* 搜索框 */}
      <div style={{ marginBottom: "16px", position: "relative" }}>
        <Input
          placeholder="搜索职位名称"
          value={searchTerm}
          onChange={handleInputChange}
          style={{
            borderRadius: "20px",
            padding: "10px 15px",
            flex: 1,
            border: "2px solid transparent", // 默认无边框
            transition: "border-color 0.3s ease", // 添加过渡效果
            boxShadow: "0 0 0 1px transparent",
          }}
          onMouseEnter={(e) => {
            e.target.style.borderColor = "#ff6400"; // 鼠标悬停时边框变为橙色
          }}
          onMouseLeave={(e) => {
            e.target.style.borderColor = "transparent"; // 鼠标移开时恢复默认
          }}
        />
      </div>
    </>
  );
};

export default JobSearch;
